<template>
  <div class="pages depositMargin-info">
    <div class="pageLevel">
      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form :rules="rules">
          <div class="total-income">
            <div class="all-income">
              <el-button type="primary" @click="goBack()" size="mini">返回</el-button>
              <span>{{shopName}}</span>
            </div>
          </div>
          <el-row :gutter="10">
            <el-col style="width: 450px">
              <el-form-item label="交易时间:" label-width="100px">
                <el-date-picker size="small" v-model="selectdata.transactionTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col style="width: 280px">
              <el-form-item label="充值方式:" label-width="100px">
                <el-select filterable size="small" style="width:180px" v-model="selectdata.type" placeholder="全部">
                  <el-option v-for="(item, index) in type" :key="index" :label="item.name" :value="item.id"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col style="width: 250px">
              <el-form-item label="" label-width="100px">
                <el-button type="primary" size="mini" @click="searchSelect" class="Button">查询</el-button>
              </el-form-item>
              <el-form-item label="" label-width="10px">
                <el-button type="primary" size="mini" class="Button" @click="download">导出</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableMain">
        <el-table :data="dataList" stripe style="width: 100%">
          <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
          <el-table-column prop="createTime" :formatter="createTime" label="交易时间" align="center" width="200"></el-table-column>
          <el-table-column prop="iphone" label="会员手机号" align="center"></el-table-column>
          <el-table-column prop="totalPrice" label="充值金额" align="center"></el-table-column>
          <el-table-column prop="fee" label="手续费" align="center"></el-table-column>
          <el-table-column prop="depositPrice" label="保证金金额" align="center"></el-table-column>
          <el-table-column prop="price" label="门店入账金额" align="center"></el-table-column>
          <el-table-column prop="payType" :formatter="payType" label="充值方式" align="center"></el-table-column>
          <el-table-column prop="accountPrice" label="会员余额" align="center"></el-table-column>
        </el-table>
        <!-- 页码 -->
        <div class="pageblock">
          <el-button size="small" type="primary" class="topage" @click="toPage">确定</el-button>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10,20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalItems">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import util from "@/util";
import { detailList, exportDetailList } from "@/api";
var fileDownload = require("js-file-download");
export default {
  computed: mapState(["merchantId", "power", "companyName"]),
  data() {
    return {
      shopName: "",
      storeLists: [], // 门店列表
      type: [
        {
          // 类型
          id: "",
          name: "全部"
        },
        {
          id: "WECHAT",
          name: "微信"
        },
        {
          id: "ALIPAY",
          name: "支付宝"
        },
        {
          id: "BANKCARD",
          name: "银行卡"
        }
        // {
        //   id: "CASH",
        //   name: "现金"
        // }
      ],
      selectdata: {
        transactionTime: [], // 交易时间
        type: "" // 充值方式
      },
      rules: {
        timeStart: [
          { required: false, message: "请输入开始时间", trigger: "change" }
        ],
        timeEnd: [
          { required: false, message: "请输入开始时间", trigger: "change" }
        ]
      },
      dataList: [], //列表数据
      //   分页
      pageSize: 10,
      totalItems: 0,
      currentPage: 1,
      exportData: {}
    };
  },
  watch: {
    sub: {
      handler: function(val, oldVal) {
        if (oldVal != null && val == false) {
        }
      },
      deep: true
    }
  },
  mounted() {
    this.data();
  },
  methods: {
    //  交易时间
    createTime: function(row) {
      return util.foryear(row.createTime) + " " + util.fortime(row.createTime);
    },
    price: function(row) {
      switch (row.storedShopType) {
        case "1":
          return row.price;
          break;
        case "2":
          return "0";
          break;
        case "3":
          return row.depositPrice;
          break;
        default:
          return "0";
      }
    },
    payType: function(row) {
      switch (row.payType) {
        case "INIT":
          return "初始金额";
        case "WECHAT":
          return "微信";
          break;
        case "ALIPAY":
          return "支付宝";
          break;
        case "BANKCARD":
          return "银行卡";
          break;
      }
    },
    data(picker) {
      //  获取今天日期
      const currentDate = new Date();
      var currentDates = currentDate.setTime(currentDate.getTime());
      var transactionDate = util.foryear(parseInt(currentDates));
      this.selectdata.transactionTime.push(transactionDate);
      this.selectdata.transactionTime.push(transactionDate);
      this.tableget(this.pageSize, 1);
    },
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    // 获取表格数据
    tableget(pageSize, pageNum) {
      if (!this.selectdata.transactionTime) {
        this.selectdata.transactionTime = ["", ""];
      }
      let dailySales = {
        isShop: 0,
        orgId: util.getQuery("orgId"),
        startTime: this.selectdata.transactionTime[0],
        endTime: this.selectdata.transactionTime[1],
        payType: this.selectdata.type,
        pageNum: pageNum,
        pageSize: pageSize,
        isDeposit: true
      };
      this.exportData = dailySales;
      detailList(dailySales).then(res => {
        this.dataList = res.data.detailList;
        this.shopName = res.data.shopName;
        this.totalItems = res.data.totalPage;
      });
    },
    goBack() {
      history.back();
    },
    // 搜索
    searchSelect() {
      this.tableget(this.pageSize, 1);
    },
    //跳页
    toPage() {
      this.tableget(this.pageSize, 1);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.tableget(val, this.currentPage);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.tableget(this.pageSize, val);
    },
    // 导出
    download() {
      if (this.dataList.length == "0") {
        this.$message.error("数据为空不能导出");
      } else {
        exportDetailList(this.exportData).then(res => {
          let fileName = "储值保证金明细.xlsx";
          fileDownload(res, fileName);
        });
      }
    }
  }
};
</script>
<style scoped>
.tableSearch .el-input {
  width: 190px;
}
.tableSearch .el-date-editor {
  width: 350px;
}
.depositMargin-info .total-income {
  color: #606266;
  width: 100%;
  line-height: 55px;
  margin: 0px 0px 10px 0px;
  border-bottom: 1px solid #eee;
}
.depositMargin-info .total-income .all-income {
  margin-left: 30px;
}
.depositMargin-info .total-income .all-income span {
  margin-left: 10px;
}
.depositMargin-info .tableSearch .el-select {
  width: 140px;
}
</style>
<style>
.outsourcingstatistics .delete .el-input__suffix {
  display: none;
}
.outsourcingstatistics .billdata .el-date-editor .el-range__close-icon {
  display: none;
}
.outsourcingstatistics .el-form-item {
  margin-bottom: 10px;
}
</style>



